<template>
	<view class="content" style="padding-top: 70rpx;">
		<view style="padding: 0 0 10rpx 10rpx;width: 65%;">
			<u-search bg-color="white" placeholder="搜索商品" v-model="keyword" shape="round" :clearabled="true" :show-action="true" action-text="搜索" @search="goSearch()" @custom="goSearch()"></u-search>
		</view>
		<!-- 幸运商城轮播图 -->
		<!-- <view class="wrap">
			<u-swiper :list="lunboImg" height="520px"></u-swiper>
		</view> -->
		<!-- 显示幸运商城所有商品类型 -->
		<view class="goodtype-box" v-if="goodsTypes.length>0">
			<view class="goodstype-item" v-for="(item,i) in goodsTypes" :key="item.id" @click="goGoodsType(item.id)">
				<view style="position: absolute;z-index: 9;height: 60px;">
					<image :src="switchPicture(item.picture)" style="width: 100rpx;height: 100rpx;border-radius: 15rpx;"></image>
					<view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 所有商品分页显示 -->
		<view class="good-box" v-if="allGoods.length>0">
			<view class="goods-item" v-for="(item,i) in allGoods" :key="item.gid" @click="goDetail(item.gid)">
				<view style="position: absolute;z-index: 9;">
					<image src='../static/center/tj.png' style='height:60px;width:60px;top: -200rpx;left: 1%;' />
				</view>
				<view style="position: absolute;">
					<image :src="switchImg(allGoods,i)" class="goods-img" mode="widthFix"></image>
					<view class="fgx">
						<view class="goods-miaoshu" style="color: #82848A;">{{item.gname}}</view>
						<view>
							<text class="qian">{{item.gprice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-tabbar v-model="current" :list="list" :mid-button="false"></u-tabbar> -->
		<view class="tabbar">
			<view style="text-align: center;color: #FF7900;">
				<uni-icons type="home" color="#FF7900" size="20"></uni-icons>
				<view>首页</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(1)">
				<uni-icons type="person" size="20"></uni-icons>
				<view>个人中心</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rawList:[],				// 轮播图原始数据
				allGoods:[ ],			// 分页查询的商品
				goodsTypes:[],			// 幸运商城商品类型集合
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/xingyun/index"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/xingyun/center/center"
					},
				],
				current: 0,
				keyword:'',		//搜索框的值
			}
		},
		onLoad() {
			//初始化首页数据
			this.getIndexInfo()
			this.getLunbotuInfo()
			this.getGoodsTypeInfo()
		},
		methods: {
			//底部tab跳转
			tabbarPage(index){
				uni.redirectTo({
					url:index==1?'center/center':'index'
				})
			},
			// 得幸运商城审核启用的商品类型
			getGoodsTypeInfo(){
				this.$http.get('/xingyunGoodsType/selectQiyongShenheGoodsTypeList', {
					
				}).then(res => {
					console.log(res.data.data)
					this.goodsTypes = res.data.data;
				})
			},
			// 得幸运商城首页商品
			getIndexInfo(){
				this.$http.get('/xingyungoods.do', {
					p:'findAllgoods'
				}).then(res => {
					// console.log(res.data.list)
					if(res.data.list.length>0){
						this.allGoods=this.allGoods.concat(res.data.list);
					}else{
						this.tips="没有更多数据";
					}
				})
			},
			//查询首页轮播图
			getLunbotuInfo(){
				// 查询轮播图
				this.$http.get('/xingyungoods.do', {
					p: 'findAlllbt',
				}).then(res => {
					this.rawList = res.data.list;
				})
			},
			// 搜索
			goSearch(){
				this.allGoods = [];
				if(this.keyword==null || this.keyword=="" || this.keyword==undefined){
					this.page = 1;
					this.tips = "上拉加载更多数据";
					this.getIndexInfo()
				}else{
					this.$http.get('/xingyunGoodsSolr/search',{
						page:0,
						limit:10000,
						key:this.keyword
					}).then(res => {
						if(res.data.length > 0){
							this.allGoods = this.allGoods.concat(res.data)
						}else{
							this.getIndexInfo();
						}
					})
				}
			},
			//处理商品类型图片
			switchImg(obj,n){
				if(obj.length>0)
					return this.host+obj[n].gimages;
				else
					return '../static/index/gm.png';
			},
			switchPicture(picture){
				if(picture.length>0){
					return this.host+"/image/xingyunGoodsType/"+picture;
				}
				return '../static/index/gm.png';
			},
			//商品详情
			goDetail(n){
				uni.navigateTo({
					url:'goods/goodsDetail?gid='+n
				})
			},
			//点击商品类型
			goGoodsType(id){
				console.log("商品类型ID："+id)
			}
		},
		computed:{
			lunboImg(){
				let tu=[	];
				for(let i=0;i<this.rawList.length;i++){
					let obj = {	};
					obj.image=this.host+this.rawList[i].cimages;
					obj.title=this.rawList[i].cimgTitle;
					tu.push(obj);
				}
				return tu;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goodtype-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: white;
		height: 200px;
		width: 98%;
		margin: auto;
		padding: 5px 5px 5px 5px;
	}
	.goodstype-item{
		width: 25%;
		height: 80px;
		margin: 5rpx auto;
		background-color: white;
		padding: 20rpx 5rpx;
	}
	
	.tabbarImage{
		width: 20px;
		height: 20px;
	}
	.tabbar{
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		justify-content: space-around;
		background-color: white;
		font-size: 11px;
		padding: 20rpx 0 20rpx 0;
		border-top: 1rpx #DCDFE6 solid;
	}
	
	page{
		background-color: #f1f1f1;
	}
	.fenlei-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.fenlei-box .fenlei-item{
		margin: 10rpx 30rpx;
	}
	.renpintj{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.tuijianbox {
	    padding-top: 10px;
	    width: 200rpx;
	    height: 200rpx;
	    text-align: center;
	    color: white;
	    background-repeat: no-repeat;
	    background-size: 100%;
	}
	.tuijianbox .fonts{
		font-size: 16rpx;
		position: relative;
		top: 10rpx;
	}
	.tuijianbox .tui-img{
		margin: auto;
	}
	.tuijianbox:nth-child(1) {
	    background-image: url('../static/index/kk-1.png');
	}.tuijianbox:nth-child(2) {
	    background-image: url('../static/index/kk-2.png');
	}.tuijianbox:nth-child(3) {
	    background-image: url('../static/index/kk-3.png');
	}
	.tab-box{
		display: flex;
		margin-top: 20rpx;
		padding-left: 20rpx;
	}
	.tab-box .active{
		border-bottom: 5rpx solid red;
	}
	.tab-box .tab-item{
		margin-right: 20rpx;
	}
	.good-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding-bottom: 115rpx;
	}
	.goods-item {
	    width: 49%;
		height: 160px;
	    margin: 5rpx auto;
	    background-color: white;
	    padding: 20rpx 5rpx;
	}
	.goods-item .goods-img {
	    max-height: 200rpx;
	    width: 320rpx;
	    display: block;
	    margin: auto;
	}
	.fgx {
	    width: 80%;
	    margin: auto;
	    // margin-top: -60px;
		padding-top: 10rpx;
		text-align: center;
	}
	.qian::before {
	    content: '￥';
	    color: red;
	    font-size: 9px;
	    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	}
	.goods-miaoshu{
		display:-webkit-box;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-line-clamp:1;
		-webkit-box-orient:vertical;
	}
	.small-container {
		margin-top: 10rpx;
		height: 60rpx;
	    display: flex;
		font-size: 7rpx;
		font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
		color: red;
	    // justify-content: space-between;
		justify-content: center;
	}
	// .small-container>view:nth-child(2)>.xiaoche {
	//     width: 40rpx;
	// 	height: 40rpx;
	// }
	.tips-text,.no-goods-box{
		text-align: center;
	}
	.good-box::after{
		content: '';
		width: 50%;
	}
</style>
